<template>
    <div class="app-grade">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-button type="primary" @click="showAdd">新增</el-button>
                </div>
            </el-col>
        </el-row>
        <!-- <el-row class="searchBox">
                <el-col :span="24">
                    <el-form ref="search" :inline="true" :model="search">
                        <div class="searchBar">
                            <el-form-item label="" class="search">
                                <el-input v-model="search.wd"></el-input>
                            </el-form-item>
                            <el-button icon="el-icon-search" @click="getData(search)"></el-button>
                        </div>
                        <el-form-item class="orderCol" label="" prop="type">
                            <el-radio-group v-model="search.col">
                                <el-radio label="id" name="col">默认</el-radio>
                                <el-radio label="chinese" name="col">语文</el-radio>
                                <el-radio label="math" name="col">数学</el-radio>
                                <el-radio label="english" name="col">英语</el-radio>
                                <el-radio label="total" name="col">总分</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item class="orderType" label="" prop="type">
                            <el-radio-group v-model="search.type">
                                <el-radio label="asc" name="type">升序</el-radio>
                                <el-radio label="desc" name="type">降序</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item class="pageSel" label="每页显示:" prop="type">
                            <el-select v-model="search.size" placeholder="请选择">
                                <el-option :label="5" :value="5"></el-option>
                                <el-option :label="10" :value="10"></el-option>
                                <el-option :label="15" :value="15"></el-option>
                                <el-option :label="20" :value="20"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="pageSel" label="每页显示:" prop="type">
                            <el-button type="primary">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row> -->
        <el-row class="userList">
            <el-col :span="24">
                <template>
                    <el-table :data="list" border style="width: 100%;text-align:center">
                        <!-- <el-table-column fixed prop="adminid" label="管理员id"></el-table-column> -->
                        <el-table-column prop="adminname" label="管理员名称"></el-table-column>
                        <el-table-column prop="role" label="管理员等级">
                            <template #default="{ row }">
                                <span v-if="row.role == 1">超级管理员</span>
                                <span v-if="row.role == 2">普通管理员</span>
                                <span v-if="row.role == 3">普通用户</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="password" label="管理员密码">
                            <template>******</template>
                        </el-table-column>
                        <el-table-column prop="checkedKeys" label="用户访问权限">
                            <template #default="{ row }">
                                <div v-for="item, index in row.checkedKeys" :key="index">{{ item }}</div>
                            </template>
                            <!-- <template #default="{row}">
                                    <template v-if="row.role==1">all</template>
                                    <template v-else>
                                        <div v-for="item,index in row.checkedKeys" :key="index">{{ item }}</div>
                                    </template>
                                </template> -->
                        </el-table-column>
                        <el-table-column label="操作">
                            <template  #default="{ row }">
                                <el-button type="text" size="small">查看</el-button>
                                <el-button type="text" size="small">编辑</el-button>
                                <el-button type="text" size="small" @click="deleteAdminHandler(row.adminid)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-col>
        </el-row>
        <!-- <el-row class="pageBox">
                <el-col :span="24" style="text-align:right;">
                    <el-pagination background layout="total,prev, pager, next,jumper" :total="total"
                        :page-size="search.size" @current-change="currentChange">
                    </el-pagination>
                </el-col>
            </el-row> -->


        <!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
                <span>是否删除当前成绩?</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmDeleteHandler">确 定</el-button>
                </span>
            </el-dialog> -->

        <el-dialog :title="isEdit ? '修改管理员信息' : '新增管理员'" :visible.sync="dialogFormVisible">
            <!-- 新增 -->
            <template v-if="!isEdit">
                <el-form ref="formAdd" :model="form" key="formAdd">
                    <el-form-item label="管理员名称" prop="adminname" :label-width="formLabelWidth">
                        <el-input v-model="form.adminname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="管理员密码" prop="password" :label-width="formLabelWidth">
                        <el-input v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="管理员等级" prop="role" :label-width="formLabelWidth">
                        <el-select v-model="form.role" placeholder="请选择班级">
                            <el-option label="超级管理员" value="1"></el-option>
                            <el-option label="普通管理员" value="2"></el-option>
                            <el-option label="普通用户" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="访问权限" prop="role" :label-width="formLabelWidth">
                        <el-tree ref="treeAdd" :data="menus" node-key="name" :props="props" show-checkbox></el-tree>
                    </el-form-item>
                    <el-form-item style="text-align:center">
                        <el-button type="primary" @click="submitHandler('treeAdd')">确 定</el-button>
                        <el-button @click="resetHandler('formAdd')">取 消</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <!-- 编辑 -->
            <template v-else>
                <!-- <el-form ref="formEdit" :model="info" key="formEdit">
                        <el-form-item label="管理员名称" prop="adminname" :label-width="formLabelWidth">
                            <el-input v-model="form.adminname" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="管理员密码" prop="password" :label-width="formLabelWidth">
                            <el-input v-model="form.password" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="管理员等级" prop="role" :label-width="formLabelWidth">
                            <el-select v-model="form.role" placeholder="请选择班级">
                                <el-option label="超级管理员" value="1"></el-option>
                                <el-option label="普通管理员" value="2"></el-option>
                                <el-option label="普通用户" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="访问权限" prop="role" :label-width="formLabelWidth">
                            <el-tree  :data="menus" show-checkbox></el-tree>
                        </el-form-item>
                        <el-form-item style="text-align:center">
                            <el-button type="primary" >确 定</el-button>
                            <el-button>取 消</el-button>
                        </el-form-item>
                    </el-form> -->
            </template>
        </el-dialog>


    </div>
</template>

<script>
/* 
    权限管理  => 页面权限  按钮权限

    页面权限 => 如果管理信息配置中 允许用户访问该页面 => 用户侧边栏菜单中才能显示

    按钮权限 => 不同权限的人 -> 页面某些部分显示的内容也不一样 



*/


import { menus } from "@/router/routes";
import { getAdminListAPI ,addAdminPostAPI,removeAdminPostAPI} from '@/api/user';


export default {
    name: "AdminView",
    data() {
        return {
            list: [],
            search: {
                adminname: "",
                password: "",
                role: 2,
                checkedKeys: [],
            },
            form: {
                adminname: "",
                password: "",
                role: 2,
                checkedKeys: [],
            },
            info: {
                adminname: "",
                password: "",
                role: 2,
                checkedKeys: [],
            },
            dialogFormVisible: false,
            dialogVisible: false,
            isEdit: false,
            formLabelWidth: '120px',
            // total: 0,
            // maxPage: null,
            // current: 1,
            deleteId: null,
            menus,
            props: {
                label: "label",
                children: "children"
            }
        }
    },
    methods: {
        // 页面操作/表单重置
        showAdd() {
            this.dialogFormVisible = true;
        },

        // 请求相关
        async getAdminList() {
            try {
                var res = await getAdminListAPI();
                this.list = res.data;
                console.log(this.list);
            } catch (err) {
                this.$message.error(err.message);
            }

        },
        async submitHandler(treeName) {
            addAdminPostAPI

           


            this.form.checkedKeys = this.$refs[treeName].getCheckedKeys();
            if (this.form.adminname && this.form.password && this.form.role && this.form.checkedKeys.length > 0) {
                try {
                    var res = await addAdminPostAPI(this.form);
                    this.list = res.data;
                    console.log(this.list);
                    
                    // 新增成功
                    this.$refs.formAdd.resetFields();  //重置表单
                    this.$refs[treeName].setCheckedKeys([],false);    // 重置 tree
                    this.getAdminList();
                    this.dialogFormVisible = true;  //关闭弹框

                } catch (err) {
                    this.$message.error(err.message);
                }
            }
        },
        async resetHandler() { },

        async deleteAdminHandler(adminid){
            try {
                    var res = await removeAdminPostAPI({
                        adminid
                    });
                    this.list = res.data;
                    console.log(this.list);
                    this.getAdminList();
                } catch (err) {
                    this.$message.error(err.message);
                }
        }

    },
    computed: {

    },
    watch: {

    },
    mounted() {
        this.getAdminList();
        console.log("menus", this.menus);
    }
}
</script>

<style lang="scss" scoped>
.searchBox,
.pageBox {
    margin-top: 10px;
}

.searchBar {
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
}

.searchBar .search {
    margin: 0;
}

::v-deep .searchBar .el-input input {
    border: 0;
}

.orderCol {
    padding: 0 20px;
    margin-left: 20px;
    border: 1px solid #DCDFE6;
}

::v-deep .orderCol .el-radio {
    margin-right: 10px;
}

.orderType {
    padding: 0 20px;
    margin-left: 20px;
    border: 1px solid #DCDFE6;
}

::v-deep .orderType .el-radio {
    margin-right: 10px;
}

.searchBar button {
    border: 0;
}

.userList {
    margin-top: 10px;
}

// ::v-deep 选择器 深度选择器 -> 专门用于修改组件内的样式
// /deep/ 选择器 深度选择器 -> 专门用于修改组件内的样式
::v-deep .userList .el-table .el-table__cell {
    text-align: center;
}
</style>